<template>
  <div class="tb">
    <mt-field label="车牌号码:" placeholder="请输入" type="text" v-model="fzdcbfd52019001"></mt-field>
    <mt-field label="车牌颜色:" placeholder="请输入" type="text" :readonly="true" v-model="currentTagsColor.name" @click.native.capture="choseColor"></mt-field>
    <mt-field label="车辆类型:" :placeholder="fzdcbfd52019003" type="text"  @click.native.capture="choseHwzl('carTyps')" v-model="carTags.name"></mt-field>
    <mt-field label="标记吨位（吨）:" placeholder="请输入" type="number"  v-model="fzdcbfd52019004"></mt-field>
    <mt-field label="总质量（吨）:" placeholder="请输入" type="number" v-model="fzdcbfd52019005"></mt-field>
    <mt-field label="燃料类型:" :placeholder="fzdcbfd52019006" type="text" @click.native.capture="choseHwzl('rllx')"   v-model="rlTags.name"></mt-field>
    <mt-field label="其他燃料类型名称:" placeholder="请输入(燃料类型选其他时填写)" type="text" v-model="fzdcbfd52019024"></mt-field>
    <mt-field label="调查期:" placeholder="请输入" type="text" v-model="fzdcbfd52019007" @click.native.capture="showDcq"></mt-field>
    <mt-field label="调查期起:" placeholder="请输入" type="date" v-model="fzdcbfd52019008"></mt-field>
    <mt-field label="调查期止:" placeholder="请输入" type="date" v-model="fzdcbfd52019009"></mt-field>
    <mt-field label="总行驶里程（公里）:" placeholder="请输入" type="number" v-model="fzdcbfd52019010"></mt-field>
    <mt-field label="调查期起里程表读数:" placeholder="请输入" type="number" v-model="fzdcbfd52019011"></mt-field>
    <mt-field label="调查期止里程表读数:" placeholder="请输入" type="number" v-model="fzdcbfd52019012"></mt-field>
    <mt-field label="能耗（升/立方米/千克/千瓦时）" placeholder="请输入"   type="number" v-model="fzdcbfd52019013"></mt-field>
    <mt-field label="百公里能耗经验值（升/立方米/千克/千瓦时）" placeholder="请输入" type="number" v-model="fzdcbfd52019014"></mt-field>
    <!-- <mt-field
      label="货类1名称:"
      placeholder="请输入"
      type="text"
      v-model="hlytags.name"
      @click.native.capture="choseHwzl('hlymc')"></mt-field>
    <mt-field label="货类1货运量（吨）:" placeholder="请输入" type="number" v-model="fzdcbfd52019011"></mt-field> -->
    <div class="button">
      <mt-button type="primary" size="large" @click="check">确定</mt-button>
    </div>
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom">
      <mt-picker :slots="slots" showToolbar ref="picker" value-key="name">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
          <div class>{{message}}</div>
          <div class="usi-btn-sure" @click="handleConfig">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
    <!-- 调查期 -->
    <mt-popup
      v-model="popupVisibleDcq"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom">
      <mt-picker :slots="slotsDcq"  showToolbar ref="pickerDcq" value-key="name">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisibleDcq = !popupVisibleDcq">取消</div>
          <div class>请选择调查期</div>
          <div class="usi-btn-sure" @click="handleConfigDcq">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
    <!-- 车牌颜色选择器 -->
    <mt-popup
      v-model="popupVisibleColor"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom">
      <mt-picker :slots="slotsColor"  showToolbar ref="pickerColor" value-key="name">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisibleColor = !popupVisibleColor">取消</div>
          <div class>请选择车牌颜色</div>
          <div class="usi-btn-sure" @click="handleConfigColor">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
  </div>
</template>
    
    <script>
import { Field } from "mint-ui";
import { Picker } from "mint-ui";
import { Popup } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      recid: "",
      yhmlk: "",
      fzdcbfd52019001: "", // 车牌号码
      fzdcbfd52019002: "", // 车牌颜色
      fzdcbfd52019003: "", // 车辆类型
      fzdcbfd52019004: "", // 标记吨位（吨）
      fzdcbfd52019005: "", // 总质量（吨）
      fzdcbfd52019006: "", // 燃料类型
      fzdcbfd52019007: "", // 调查期
      fzdcbfd52019008: "", // 调查期起
      fzdcbfd52019009: "", // 调查期止
      fzdcbfd52019010: "", // 总行驶里程（公里）
      fzdcbfd52019011: "", // 调查期起里程表读数
      fzdcbfd52019012: "", // 调查期止里程表读数
      fzdcbfd52019013: "", // 能耗（升/立方米/千克/千瓦时）
      fzdcbfd52019014: "", // 百公里能耗经验值（升/立方米/千克/千瓦时）
      fzdcbfd52019024: "",
      //
      showToolbar: true,
      slots: [
        {
          values: []
        }
      ],
      popupVisible: false,
      carTags:{},
      rlTags:{},
      message: "",
      flag: "hlymc",
      //调查期选择器相关
      popupVisibleDcq: false,
      slotsDcq: [
        {
          values: [{"code":"1","flag":"Dcq","name":"上旬（1-10日）"},
          {"code":"2","flag":"Dcq","name":"中旬（11-20日）"},
          {"code":"3","flag":"Dcq","name":"下旬（21-30日）"},
          {"code":"4","flag":"Dcq","name":"整月"},
          {"code":"9","flag":"Dcq","name":"其他"}]
        }
      ],
      currentTags: {},
      slotsColor: [
        {
          values: [{"code":"1","flag":"Dcq","name":"蓝色"},
          {"code":"2","flag":"Dcq","name":"黄色"},
          {"code":"3","flag":"Dcq","name":"黑色"},
          {"code":"4","flag":"Dcq","name":"白色"},
          {"code":"5","flag":"Dcq","name":"黄绿"},
          {"code":"6","flag":"Dcq","name":"渐变绿"},
          {"code":"9","flag":"Dcq","name":"其他"},]
        }
      ],
      currentTagsColor: {},
      popupVisibleColor: false,
    };
  },
  watch: {
      //能耗
      fzdcbfd52019013(newVal){        
        if(newVal != "" && this.fzdcbfd52019010 != ""){
          this.fzdcbfd52019014 = Math.round((((newVal/this.fzdcbfd52019010) * 100))*1000)/1000;
        }        
      },
      //总行驶里程
      fzdcbfd52019010(newVal){
        if(newVal != "" && this.fzdcbfd52019013 != "" && newVal != "0"){
          this.fzdcbfd52019014 = Math.round((((this.fzdcbfd52019013/newVal) * 100))*1000)/1000;
        } 
      },
      //调查期起里程表读数
      fzdcbfd52019011(newVal){
        if(newVal != "" && this.fzdcbfd52019012 != ""){
          this.fzdcbfd52019010 = parseFloat(this.fzdcbfd52019012) - parseFloat(newVal);
        }
      },
      //调查期止里程表读数
      fzdcbfd52019012(newVal){
        if(newVal != "" && this.fzdcbfd52019011 != ""){
          this.fzdcbfd52019010 = parseFloat(newVal) - parseFloat(this.fzdcbfd52019011);
        }
      },
  },
  created() {
      console.log(this.$route.query.yhmlk)
  },
  mounted() {
      this.getCode()
  },
  methods: {
    // 校验条件
    check(){
      if(this.fzdcbfd52019001 == ''){
          Toast("车牌号码不能为空！");
      } else if(this.fzdcbfd52019002 == ''){
          Toast("车牌颜色不能为空！");
      } else if(this.fzdcbfd52019003 == ''){
          Toast("车辆类型不能为空！");
      } else if((this.fzdcbfd52019003 == '1' || this.fzdcbfd52019003 == '1.1' || this.fzdcbfd52019003 == '1.2' || this.fzdcbfd52019003 == '1.3') && this.fzdcbfd52019004 == ''){
          Toast("标记吨位不能为空！");
      } else if((this.fzdcbfd52019003 == '1' || this.fzdcbfd52019003 == '1.1' || this.fzdcbfd52019003 == '1.2' || this.fzdcbfd52019003 == '1.3') && this.fzdcbfd52019005 == ''){
          Toast("总质量不能为空！");
      } else if(this.fzdcbfd52019006 == ''){
          Toast("燃料类型不能为空！");
      }  else if(this.fzdcbfd52019006 == '6' && this.fzdcbfd52019024 == ''){
          Toast("其他燃料类型名称不能为空！");
      }   else if(this.fzdcbfd52019006 != '6' && this.fzdcbfd52019024 != ''){
          Toast("其他燃料类型名称不用填写！");
      } else if(this.fzdcbfd52019007 == ''){
          Toast("调查期不能为空！");
      } else if(this.fzdcbfd52019007 == '其他' && (this.fzdcbfd52019008 == '' || this.fzdcbfd52019009 == '')){
          Toast("调查期起止时间不能为空！");
      } else if(this.fzdcbfd52019010 == '' && (this.fzdcbfd52019011 == '' || this.fzdcbfd52019012 == '')){
          Toast("总行驶里程与调查期起、止里程表读数至少填一项，如为零样本，请总行驶里程填写为0！");
      } else if(this.fzdcbfd52019011 != '' && this.fzdcbfd52019012 == ""){
          Toast("调查期止里程表读数应大于等于调查期起里程表读数");
      }  else if(this.fzdcbfd52019012 != '' && this.fzdcbfd52019011 == ""){
          Toast("调查期止里程表读数应大于等于调查期起里程表读数");
      }else if(this.fzdcbfd52019011 != '' && parseFloat(this.fzdcbfd52019011) > parseFloat(this.fzdcbfd52019012)){
          Toast("调查期止里程表读数应大于等于调查期起里程表读数");
      } else if(this.fzdcbfd52019012 != '' && parseFloat(this.fzdcbfd52019011) > parseFloat(this.fzdcbfd52019012)){
          Toast("调查期止里程表读数应大于等于调查期起里程表读数");
      } else if(this.fzdcbfd52019013 == '' &&  this.fzdcbfd52019014 == ''){
          Toast("能耗与百公里能耗经验值至少填一项！");
      }
      //  else if(this.fzdcbfd52019007 != '' &&  (this.fzdcbfd52019010 != '' && this.fzdcbfd52019010 != "0") && (this.fzdcbfd52019011 == '' || this.fzdcbfd52019012 == '')){
      //     Toast("总行驶里程应等于调查期止里程表读数-调查期起里程表读数");
      // }
       else {
        this.commit();
      }
    },
       getCode() {
      let data = {};
      data.recid = this.$route.query.recid;
    //   console.log("yhmlkRecidGeeee-->" + data.yhmlkRecid);
      this.axios
        .post(
          "http://zxdc.catsic.com:9090/sampling/assit/selectFzdcbfd05",
          { data: data },
          {
            headers: {
              "Content-Type": "application/json",
              mobileHeader:
                '{"sessionId":' + localStorage.getItem("sessionId") + "}"
            }
          }
        )
        .then(
          result => {
            if (result.data.status == "1000") {
                 console.log("restlut-->>"+JSON.stringify(result))
              let fzdcbfd05 = result.data.data.Fzdcbfd05;
              (this.recid = fzdcbfd05.recid),
                (this.yhmlk = fzdcbfd05.yhmlk),
                (this.fzdcbfd52019001 = fzdcbfd05.fzdcbfd52019001),
                (this.fzdcbfd52019002 = fzdcbfd05.fzdcbfd52019002),
                this.currentTagsColor.name = this.getCarColorName(fzdcbfd05.fzdcbfd52019002),
                (this.fzdcbfd52019003 = fzdcbfd05.fzdcbfd52019003),
                (this.fzdcbfd52019004 = fzdcbfd05.fzdcbfd52019004),
                (this.fzdcbfd52019005 = fzdcbfd05.fzdcbfd52019005),
                (this.fzdcbfd52019006 = fzdcbfd05.fzdcbfd52019006),
                (this.fzdcbfd52019007 = this.getDcqName(fzdcbfd05.fzdcbfd52019007));
                if(fzdcbfd05.fzdcbfd52019008 != undefined && fzdcbfd05.fzdcbfd52019009 != undefined){
                    (this.fzdcbfd52019008 = fzdcbfd05.fzdcbfd52019008.replace('/', '-').replace('/', '-')),
                    (this.fzdcbfd52019009 = fzdcbfd05.fzdcbfd52019009.replace('/', '-').replace('/', '-'));
                }
                (this.fzdcbfd52019010 = fzdcbfd05.fzdcbfd52019010),
                (this.carTags.name = this.getCarTypeNmae(fzdcbfd05.fzdcbfd52019003)),
                (this.fzdcbfd52019011 = fzdcbfd05.fzdcbfd52019011),
                (this.fzdcbfd52019012 = fzdcbfd05.fzdcbfd52019012),
                (this.rlTags.name = this.getFuleType(fzdcbfd05.fzdcbfd52019006)),
                (this.fzdcbfd52019013 = fzdcbfd05.fzdcbfd52019013),
                (this.fzdcbfd52019014 = fzdcbfd05.fzdcbfd52019014),
                (this.fzdcbfd52019024 = fzdcbfd05.fzdcbfd52019024),
                (this.floatorder = fzdcbfd05.floatorder)
            }
            // this.allgetCode();
          },
          error => {
            console.log("getyhcars request error:" + error);
          }
        );
    //   console.log(this.$route.query.yhmlk);
    },
    commit() {
      if(this.fzdcbfd52019014 == undefined || this.fzdcbfd52019014 == "null"){this.fzdcbfd52019014 = ""}
      let data = {};
      let fzdcbfd05 = {};
      (fzdcbfd05.recid = this.recid),
        (fzdcbfd05.yhmlk = this.yhmlk = this.$route.query.yhmlk),
        (fzdcbfd05.fzdcbfd52019001 = this.fzdcbfd52019001),
        (fzdcbfd05.fzdcbfd52019002 = this.fzdcbfd52019002),
        (fzdcbfd05.fzdcbfd52019003 = this.fzdcbfd52019003),
        (fzdcbfd05.fzdcbfd52019004 = this.fzdcbfd52019004),
        (fzdcbfd05.fzdcbfd52019005 = this.fzdcbfd52019005),
        (fzdcbfd05.fzdcbfd52019006 = this.fzdcbfd52019006),
        (fzdcbfd05.fzdcbfd52019007 = this.getDcqCode(this.fzdcbfd52019007)),
        (fzdcbfd05.fzdcbfd52019008 = this.fzdcbfd52019008.replace(/-/g,'/')),
        (fzdcbfd05.fzdcbfd52019009 = this.fzdcbfd52019009.replace(/-/g,'/')),
        (fzdcbfd05.fzdcbfd52019010 = this.fzdcbfd52019010),
        (fzdcbfd05.fzdcbfd52019011 = this.fzdcbfd52019011),
        (fzdcbfd05.fzdcbfd52019012 = this.fzdcbfd52019012),
        (fzdcbfd05.fzdcbfd52019013 = this.fzdcbfd52019013),
        (fzdcbfd05.fzdcbfd52019014 = this.fzdcbfd52019014),
        (fzdcbfd05.fzdcbfd52019024 = this.fzdcbfd52019024),
        (fzdcbfd05.floatorder = this.floatorder),
        (data.fzdcbfd05= fzdcbfd05),
         console.log("tijiao-->>"+JSON.stringify(data.fzdcbfd05))
        this.axios
          .post(
            "http://zxdc.catsic.com:9090/sampling/assit/modifyFzdcbfd05",
            { data: data },
            {
              headers: {
                "Content-Type": "application/json",
                mobileHeader:
                  '{"sessionId":' + localStorage.getItem("sessionId") + "}"
              }
            }
          )
          .then(
            result => {
              if (result.data.status == "1000") {
                console.log("保存成功");
                console.log(result);
                this.goback();
              }
            },
            error => {
              console.log("getyhcars request error:" + error);
            }
          );
    },
    // 选择车牌颜色
    choseColor() {  
      this.popupVisibleColor = true;
    },
    //车牌颜色
    handleConfigColor: function() {
      this.currentTagsColor = this.$refs.pickerColor.getValues()[0];
      this.fzdcbfd52019002 = this.currentTagsColor.code;
      this.popupVisibleColor = false;
    },
    // 选择货物种类
    choseHwzl(hwzl) {
      this.$http.get("http://zxdc.catsic.com:9090/sampling/json/carTyps").then(
        response => {
          switch (hwzl) {
            case "carTyps":
              this.message = "请选择车辆类型";
              this.slots[0].values = response.body.carType;
              this.flag = "carTyps";
              break;
            case "rllx":
              this.message = "请选择燃料类型";
              this.slots[0].values = response.body.fuleType;
              this.flag = "rllx";
              break;
          }
          this.popupVisible = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    // 弹出框点击确定按钮点击事件 add by qzn 20190627
    handleConfig: function() {
      this.currentTags = this.$refs.picker.getValues()[0];
      switch (this.flag) {
        case "carTyps":
            this.carTags = this.currentTags;
            this.fzdcbfd52019003 = this.currentTags.code
          break;
        case "rllx":
            this.rlTags = this.currentTags;
            this.fzdcbfd52019006 = this.currentTags.code
          break;
      }
      this.popupVisible = false;
    },
    showDcq: function() {
      this.popupVisibleDcq = true;
    },
    handleConfigDcq: function() {
      this.currentTags = this.$refs.pickerDcq.getValues()[0];
      this.fzdcbfd52019007 = this.currentTags.name;
      this.popupVisibleDcq = false;
    },
    getCarTypeNmae(code) {// 获取货物类型名称显示在表格 add by qzn 20190704  
      var carTypes = [
        {
        "code": "1",
        "name": "整车",
      },
      {
        "code": "1.1",
        "name": "集装箱车",
      },
      {
        "code": "1.2",
        "name": "冷藏保温车",
      },
      {
        "code": "1.3",
        "name": "其他",
      },
      {
        "code": "2",
        "name": "牵引车",
      },
      ];
      var name;
      carTypes.forEach(item => {
        if (item.code === code) {
          name = item.name;
        }
      });
      return name;
    },
    getFuleType(code){
        var fuleTypes = [ {
        "code": "1",
        "name": "汽油",
      },
      {
        "code": "2",
        "name": "柴油",
      },
      {
        "code": "3",
        "name": "压缩天然气",
      },
      {
        "code": "4",
        "name": "液化天然气",
      },
      {
        "code": "5",
        "name": "电",
      },
      {
        "code": "6",
        "name": "其他",
      }]
      var name;
      fuleTypes.forEach(item => {
        if (item.code === code) {
          name = item.name;
        }
      });
      return name;
    },
    getDcqName(code) { 
      var carTypes = [
        {
        "code": "1",
        "name": "上旬（1-10日）",
      },
      {
        "code": "2",
        "name": "中旬（11-20日）",
      },
      {
        "code": "3",
        "name": "下旬（21-30日）",
      },
      {
        "code": "4",
        "name": "整月",
      },
      {
        "code": "9",
        "name": "其他",
      },
      ];
      var name;
      carTypes.forEach(item => {
        if (item.code === code) {
          name = item.name;
        }
      });
      return name;
    },
    getDcqCode(name) {// 获取货物类型名称
                  var goodsTypes = [
                    {
                      code: "1",
                      name: "上旬（1-10日）"
                    },
                    {
                      code: "2",
                      name: "中旬（11-20日）"
                    },
                    {
                      code: "3",
                      name: "下旬（21-30日）"
                    },
                    {
                      code: "4",
                      name: "整月"
                    },
                    {
                      code: "9",
                      name: "其他"
                    }
                  ];
                  var code;
                  goodsTypes.forEach(item => {
                    if (item.name === name) {
                      code = item.code;
                    }
                  });
                  return code;
              },
              // 获取车牌颜色名称
                getCarColorName(code) {
                  var goodsTypes = [
                    {
                      code: "1",
                      name: "蓝色"
                    },
                    {
                      code: "2",
                      name: "黄色"
                    },
                    {
                      code: "3",
                      name: "黑色"
                    },
                    {
                      code: "4",
                      name: "白色"
                    },
                    {
                      code: "5",
                      name: "黄绿"
                    },
                    {
                      code: "6",
                      name: "渐变绿"
                    },
                    {
                      code: "9",
                      name: "其他"
                    }
                  ];
                  var name;
                  goodsTypes.forEach(item => {
                    if (item.code === code) {
                      name = item.name;
                    }
                  });
                  return name;
              },
    goback() {
      this.$router.go(-1);
    }
  }
};
</script>
    
    <style lang="scss" scoped>
.tb {
  padding-top: 10px;
}

.mint-cell {
  background-color: #efeff4;
}
input[type="number"] {
  line-height: 21px;
  width: 100%;
  height: 40px;
  margin-bottom: 0px;
  padding: 10px 15px;
  -webkit-user-select: text;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  outline: 0;
  background-color: #fff;
  -webkit-appearance: none;
}
.button {
  padding-top: 3%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
}
.picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 200px;
  line-height: 40px;
  font-size: 16px;
  width: 100%;
}
.usi-btn-cancel,
.usi-btn-sure {
  color: #26a2ff;
}
.mint-popup-bottom {
  width: 100%;
  top: auto;
  right: auto;
  bottom: 0;
}
</style>